<script setup>
import {ref,reactive,onMounted} from "vue"
import myShowDM from "../../../../components/myShowDM.vue"
const setMessage1 = ref("")
const num1 = ref(0)
const num2 = ref(0)
const numTemplate = ref(0)
const title1 = ref("小程序赋值")
const title2 = ref("修改值")

const numTemplateBtn = () => {
    numTemplate.value += 1
}

const codeDetail = reactive([
    '<view>',
    '</view>',
])

//父组件监听
const changNumBtn1 = async(params) => {
    // console.log('父组件:',params)
    num1.value = params.params1
}
const changNumBtn2 = async(params) => {
    num2.value = params.params1
}
</script>

<template>
    <div class="xcxAll">
        <h2 class="title1">{{ title1 }}</h2>
        <div class="message1">
            <myShowDM 
                type="wx_xcx"
                :num="num1"
                xcxName="我的小程序案例 - 赋值"
                @changNum="changNumBtn1">
                <template v-slot:slot1>
                    <div v-if="num1 == 0" class="message1DetailBox">
                        <div class="line1">&nbsp;{{ "<view class='all'>" }}</div>
                        <!-- v-pre:为了在页面上程序{} -->
                        <div class="line2">{{ "<text>"}}<span v-pre>{{ num }}</span>{{"</text>" }}</div>
                        <div class="line1">&nbsp;{{ "</view>" }}</div>
                    </div>
                    <div v-if="num1 == 1" class="message1DetailBox">
                        <div class="line1">&nbsp;&nbsp;{{ ".all{" }}</div>
                        <div class="line2">{{ "width:20rpx;" }}</div>
                        <div class="line2">{{ "height:10rpx;" }}</div>
                        <div class="line2">{{ "display: flex;" }}</div>
                        <div class="line2">{{ "align-items: center;" }}</div>
                        <div class="line2">{{ "justify-content: center;" }}</div>
                        <div class="line1">&nbsp;&nbsp;{{ "}" }}</div>
                    </div>
                    <div v-if="num1 == 2">
                        <div class="line1">&nbsp;&nbsp;{{ "Page({" }}</div>
                        <div class="line2">{{ "data:{" }}</div>
                        <div class="line3">{{ "num:1," }}</div>
                        <div class="line2">{{ "}," }}</div>
                        <div class="line1">&nbsp;&nbsp;{{ "})" }}</div>
                    </div>
                </template>
                <template v-slot:slot2>
                    <div class="messageShowBox">{{ "1" }}</div>
                </template>
            </myShowDM>
        </div>
        <h2 class="title2">{{ title2 }}</h2>
        <div class="message2">
            <myShowDM 
                type="wx_xcx"
                :num="num2"
                xcxName="我的小程序案例 - 修改值"
                @changNum="changNumBtn2">
                <template v-slot:slot1>
                    <div class="message1DetailBox" v-if="num2 == 0">
                        <div class="line1">&nbsp;{{ "<view class='all'>" }}</div>
                        <!-- v-pre:为了在页面上程序{} -->
                        <div class="line2">{{ "<text>"}}<span v-pre>{{ num }}</span>{{"</text>" }}</div>
                        <div class="line2">{{ "<button bindtap='changeNum'>+1</button>" }}</div>
                        <div class="line1">&nbsp;{{ "</view>" }}</div>
                    </div>
                    <div class="message1DetailBox" v-if="num2 == 1">
                        <div class="line1">&nbsp;&nbsp;{{ ".all{" }}</div>
                        <div class="line2">{{ "width:500rpx;" }}</div>
                        <div class="line2">{{ "height:50rpx;" }}</div>
                        <div class="line2">{{ "display: flex;" }}</div>
                        <div class="line2">{{ "align-items: center;" }}</div>
                        <div class="line2">{{ "justify-content: center;" }}</div>
                        <div class="line1">&nbsp;&nbsp;{{ "}" }}</div>
                    </div>
                    <div class="message1DetailBox" v-if="num2 == 2">
                        <div class="line1">&nbsp;&nbsp;{{ "Page({" }}</div>
                        <div class="line2">{{ "data:{" }}</div>
                        <div class="line3">{{ "num:1," }}</div>
                        <div class="line2">{{ "}," }}</div>
                        <div class="line2">{{ "changeNum(){" }}</div>
                        <div class="line3">{{ "this.setData({" }}</div>
                        <div class="line4">{{ "num:this.data.num + 1" }}</div>
                        <div class="line3">{{ "})" }}</div>
                        <div class="line2">{{ "}," }}</div>
                        <div class="line1">&nbsp;&nbsp;{{ "})" }}</div>
                    </div>
                </template>
                <template v-slot:slot2>
                    <div class="num2ShowBox">
                        <span class="numTemplateClass">{{ numTemplate }}</span><button @click="numTemplateBtn" class="wxxcxBtnDefault">+1</button>
                    </div>
                </template>
            </myShowDM>
        </div>
    </div> 
</template>

<style scoped>
.xcxAll{
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.title1{
    position: relative;
    left: 0;
    top: 0;
}
.title2{
    position: relative;
    left: 0;
    top: 5%;
}
.message1{
    position: relative;
    left: 4%;
    top: 2%;
    width: 950px;
    height: 500px;
    background-color: black;
    border-radius: 10px;
}
.message2{
    position: relative;
    left: 4%;
    top: 7%;
    width: 950px;
    height: 500px;
    background-color: black;
    border-radius: 10px;
}
.oneNum{
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 5%;
}
.line1{
    position: relative;
    left: 0px;
    top: 0;
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    color: #ffff;
}
.line2{
    position: relative;
    left: 4%;
    top: 0;
    width: 96%;
    height: 10%;
    display: flex;
    align-items: center;
    color: #ffff;
}
.line3{
    position: relative;
    left: 8%;
    top: 0;
    width: 92%;
    height: 10%;
    display: flex;
    align-items: center;
    color: #ffff;
}
.line4{
    position: relative;
    left: 12%;
    top: 0;
    width: 92%;
    height: 10%;
    display: flex;
    align-items: center;
    color: #ffff;
}
.message1DetailBox{
    width: 100%;
    height: 100%;
}
.messageShowBox{
    position: relative;
    left: 2%;
    top: 1%;
    width: 20%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.num2ShowBox{
    width: 250px;
    height: 25px;
    display: flex;
}
.wxxcxBtnDefault{
    /* 微信小程序button默认样式 */
    width: 184px;
    height: 40px;
    border: none;
    border-radius: 5px;
    background-color: rgba(200, 200, 200, 1);
    font-size: 17px;
    font-weight: 600;
    outline: none;
}
.wxxcxBtnDefault:active{
    background-color: rgba(150, 150, 150, 1);
}
.numTemplateClass{
    width: 50px;
    height: 50px;
}
</style>